<style>
  .container{
    height: 100%;
    width: 100%;
    background: #3AB4FF;
  }
  .center{
    display: table-cell;
    vertical-align: middle;

  }
  .center_cell{

  }
  .login_con{
    width: 380px;
    height: 450px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
  }
  .login_con img{
    width: 30px;
  }
  .center_input{
    margin: 0 auto;
    width: 250px;
  }
  .item_style:first-child{
    margin-top: 20px;
  }
  .item_style{
    margin-bottom: 25px;
  }
</style>
<template>
  <div class="container" style="width: 1920px;height: 1080px;">
    <div class="center" style="width: 1920px;height: 800px;/*background: green*/">
      <div class="login_con">
          <div class="item_style"><img src="../../images/logo.png" alt=""></div>
          <div class="item_style"><h1>管理系统</h1></div>
          <div class="item_style">
            <Input v-model="username" class="center_input">
              <span slot="prepend" style="color:#47CB89;"><Icon type="person"></Icon></span>
            </Input>
          </div>
          <div class="item_style">
            <Input v-model="pwd" class="center_input" type="password">
              <span slot="prepend" style="color:#47CB89;"><Icon type="ios-locked"></Icon></span>
            </Input>
          </div>
          <div class="item_style">
            <div style="margin-bottom: 10px;">
              <span slot="prepend">忘记密码?<a @click="forgetPwd">点我</a></span>
            </div>
            <Button @click="login(username,pwd)" type="info">登录</Button>
            <Button @click="register" type="success">注册</Button>
          </div>
      </div>
      <div class="center_cell"><span>Power By JLCS Copyright@2017 All rights Reserved</span></div>
    </div>
  </div>
</template>
<script>
  import store from '@/store'
  import { mapActions,mapGetters } from 'vuex'
  export default{
    store,
    data(){
      return {
        username:'admin',
        pwd:'admin'
      }
    },
    computed:{

    },
    methods:{
      ...mapActions({
        // 在input 的blur 事件中触发回调，并将输入值作为参数返回到store中
        saveUserName: 'saveUserName'
      }),
      ...mapGetters({
          // 在store.js 中注册的getters
          showUserName:'showUserName'
      }),
      login(un,pwd){
        var data = {
          userName:un,
          pwd:pwd
        }
        var that = this;
        //请求块
        this.$http.get('url',data).then((res)=>{
          //登录成功后才传值
          this.saveUserName(un)
          //提示
          this.$Message.loading({
            content:'验证通过,即将跳转...',
          })
          //跳转
          setTimeout(()=>{
            that.$router.push({
              name:'gsInfo'
            })
          },2000)
          that.showUserName(un);
        }).catch((err)=>{
          this.$Message.loading({
            content:'验证失败，请重试',
          })
        })
        //测试
        //传递username进入vuex
        this.saveUserName(un)
        //修改登录状态
        this.$store.commit('changeLogin','1');
        //跳转
        setTimeout(()=>{
          that.$router.push({
            name:'gsInfo'
          })
        },2000)
      },
      register(){
        /*this.showUserName()
        console.log("现在获取到的用户名:"+this.showUserName());*/
        this.$router.push({
          name:'register'
        });
      },
      //忘记密码
      forgetPwd(){
        this.$Message.warning({
          content:'请联系管理员',
         duration: 10
        })
      }
    }
  }
</script>
